<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>合同管理-新建合同</title>
    <link rel="icon" href="favicon.ico" type="images/ico">
    <meta name="author" content="dc">
    <link href="/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/css/materialdesignicons.min.css" rel="stylesheet" />
    <link href="/css/animate.min.css" rel="stylesheet" />
    <link href="/css/style.min.css" rel="stylesheet" />
    <link href="/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="/js/jquery-confirm/jquery-confirm.min.css" />
    <link rel="stylesheet" href="/css/input_tags.css" />
    <!--时间选择插件-->
    <link rel="stylesheet" href="/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" />
    <!--日期选择插件-->
    <link rel="stylesheet" href="/js/bootstrap-datepicker/bootstrap-datepicker3.min.css" />
    <link rel="stylesheet" href="/css/input_tags.css" />
    <link rel="stylesheet" type="text/css" href="/css/daterangepicker.css" />
    <!-- 多选下拉 -->
    <link rel="stylesheet" href="/css/bootstrap-multiselect.css" type="text/css"/>
    <link rel="stylesheet" href="/css/bootstrap-select.css" type="text/css"/>
    <link rel="stylesheet" href="/css/skin.css" />
    <link rel="stylesheet" href="/css/contractManager/user/addContract.css" />
    <link rel="stylesheet" href="/css/bootstrapValidator.min.css" />

    <script th:inline="javascript">
        var contract = [[${contract}]];
        var tag = [[${tag}]];
        console.log("contract——" + contract);
        console.log("tag——" + tag);
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="card sub-reset">
        <div class="card-header">
            <h1 th:if="${contract == null} ">新建合同</h1>
            <h1 th:if="${contract != null} ">编辑合同</h1>
        </div>
        <div class="card-body body-height">
            <table id="abc"></table>
            <ul class="new-tabs nav-tab-center" th:if="${contract == null} ">
                <!-- 全部 会员产品合同 非会员产品合同-->
                <li class="nav-item active">
                    <a href="#" data-toggle="tab" aria-expanded="false" id="allTab" onclick="changeTab('member')">会员新单合同</a>
                </li>
                <li class="nav-item">
                    <a href="#" data-toggle="tab" aria-expanded="false" id="memberContractTab" onclick="changeTab('noMember')">非会员产品合同</a>
                </li>
                <li class="nav-item">
                    <a href="#" data-toggle="tab" aria-expanded="false" id="activeMember" onclick="changeTab('activeMember')">活动产品合同</a>
                </li>
            </ul>
<!--            会员新单合同-->
            <form class="well form-well"  id="customerForm">
                <div class="showFirst">
                    <h2>基本信息</h2>
                    <div class="row from-left">
                        <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12" th:if="${contract != null} ">
                            <label class="control-label label-required">合同类型</label>
                            <div class="form-content ">
                                <select class="form-control" title="请选择" id="contractType">
                                    <option th:selected="${contract?.contractType == '1'}" value="1">非会员合同</option>
                                    <option th:selected="${contract?.contractType == '2'}" value="2">会员新单合同</option>
                                    <option th:selected="${contract?.contractType == '3'}" value="3">活动合同</option>
                                    <option th:selected="${contract?.contractType == '4'}" value="4">会员续费合同</option>
                                    <option th:selected="${contract?.contractType == '5'}" value="5">兑换合同</option>
                                    <option th:selected="${contract?.contractType == '6'}" value="6">单品合同</option>
                                    <option th:selected="${contract?.contractType == '7'}" value="7">会员单次合同</option>
                                </select>
                                <!--
                                非会员标准合同对应的 客户名称 列表为非会员列表
                                -->
                            </div>
                        </div>
                        <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12 form-group">
                            <label class="control-label label-required">客户名称</label>
                            <div class="form-content">
                                <!--与合同类型相关联-->
                                <select class="form-control" id="customerList" onchange="getCustomerAssociateSelect()"  type="text" title="请选择客户" data-live-search="true" name="customerList">
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12 form-group location-btn">
                            <buttom class="btn-add-self" onclick="onAddSelf()">
                                <span class="mdi mdi-plus" aria-hidden="true"></span>
                            </buttom>
                        </div>

                        <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12 form-group">
                            <label class="control-label label-required">客户邮箱</label>
                            <div class="form-content">
                                <input type="text" class="form-control" placeholder="请添加客户邮箱" th:value="${contract?.customerEmail}" id="customerEmail" name="customerEmail">
                            </div>
                        </div>

                        <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12 form-group">
                            <label class="control-label label-required">客户联系人</label>
                            <div class="form-content">
                                <select type="text" id="customerContractList" class="form-control" title="请选择客户联系人" data-live-search="true" disabled name="customerContractList"></select>
                            </div>
                        </div>
                        <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12 form-group">
                            <label class="control-label label-required">联系方式</label>
                            <div class="form-content">
                                <input type="text" class="form-control" placeholder="请先选择客户联系人" id="phoneNumber" name="phoneNumber">
                            </div>
                        </div>
                    </div>
                    <div class="isMember">
                        <h2>合同日期</h2>
                        <div class="row from-left">
                            <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12 isMember form-group">
                                <label class="control-label label-required">合同起止日期</label>
                                <div class="form-content">
                                    <input type="text" class="form-control" id="contractDate" name="contractDate" placeholder="请选择合同起止日期" autocomplete="off" th:value="${contract!=null?#dates.format(contract?.contractStartDate,'yyyy-MM-dd')+' 至 '+#dates.format(contract?.contractEndDate,'yyyy-MM-dd'):contract?.contractStartDate}">
                                </div>
                            </div>
                        </div>
                    </div>

                    <h2>付款信息</h2>
                    <div class="row from-left">
                        <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12 form-group">
                            <label class="control-label">付款账号</label>
                            <div class="form-content">
                                <input type="text" class="form-control" placeholder="请输入付款账号" name="paymentAccount" th:value="${contract?.paymentAccount}" autocomplete="off" id="paymentAccount">
                            </div>
                        </div>
                        <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12 form-group">
                            <label class="control-label label-required">支付方式</label>
                            <div class="form-content">
                                <select class="form-control" title="请选择" id="paymentMethod" name="paymentMethod">
                                    <!--<option value="1">线上支付</option>-->
                                    <option th:selected="${contract?.paymentMethod == '2'}" value="2">线下支付</option>
                                    <option th:selected="${contract?.paymentMethod == '3'}" value="3">余额支付</option>
                                    <option th:selected="${contract?.paymentMethod == '4'}" value="4">转入额支付</option>
                                    <option th:selected="${contract?.paymentMethod == '5'}" value="5">余额+转入额支付</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <h2>关联信息</h2>
                    <div class="row from-left">
                        <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12 form-group">
                            <label class="control-label label-required">关联跟进记录</label>
                            <div class="form-content">
                                <select class="form-control" title="请选择关联跟进记录" id="followRecordList" disabled name="followRecordList"></select>
                            </div>
                        </div>
                        <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12 form-group">
                            <label class="control-label label-required">关联赢单商机</label>
                            <div class="form-content">
                                <!--                            th:selected="${contract?.opportunityId}"-->
                                <select class="form-control" title="请选择关联赢单商机" id="opportunityList" disabled name="opportunityList"></select>
                            </div>
                        </div>
                    </div>
                    <h2>其他信息</h2>
                    <div class="row from-left">
                        <div class="col-lg-10 col-md-10 col-sm-6 col-xs-12">
                            <label class="control-label">合作开发人员</label>
                            <div class="form-content">
                                <!--   th:value="${contract?.coDeveloperList}"-->
                                <input  type="text" placeholder="请输入姓名"  class="form-control" data-provide="typeahead" id="cooperateInput">
                            </div>
                        </div>
                    </div>
                    <div class="form-actions">
                        <button class="btn btn-primary btn-label form-group" type="submit" onclick="addCustomerContract()" name="submit"  id="submit"><label><i class="mdi mdi-check"></i></label>提交</button>
                        <button class="btn btn-default" type="reset">重置</button>
                    </div>
                </div>
                <iframe src="/front/contractManager/userContractdetail" style="width: 100%;height: 1700px;border:none;" ></iframe>

            </form>

            <div class="well form-well">
                <input type="text" id="productTotalInput" hidden>                      <!--产品 计价总计-->
                <input type="text" id="productDiscountTotalInput" hidden>              <!--产品 优惠价格总计-->
                <input type="text" id="productActivityTotalInput" hidden>              <!--活动产品 计价总计-->
                <input type="text" id="productActivityDiscountTotalInput" hidden>      <!--活动产品 优惠价格总计-->

                <h2>订单信息</h2>
                <div class="active-contract">
                    <h3>产品列表</h3>
                    <div class="total-box"><span class="total">计价总计：<strong id="productTotal">0.00</strong></span></div>
                    <div id="productTableToolbar" class="toolbar">
                        <button type="button" class="btn btn-success btn-label" data-toggle="modal" data-target="#addProductModal"><label><i class="mdi mdi-plus"></i></label>添加产品</button>
                    </div>
                    <table id="productTable"></table>
                </div>

                <div class="member-contract">
                    <h3>活动产品列表</h3>
                    <div class="total-box"><span class="total">计价总计：<strong id="productActivityTotal">0.00</strong></span></div>
                    <div id="productActivityTableToolbar" class="toolbar">
                        <button type="button" class="btn btn-success btn-label" data-toggle="modal" data-target="#addProductActivityModal"><label><i class="mdi mdi-plus"></i></label>添加活动产品</button>
                    </div>
                    <table id="productActivityTable"></table>
                </div>

                <h3>赠品列表</h3>
                <!--<div id="giftTableToolbar">
                    <button type="button" class="btn btn-success btn-label" data-toggle="modal" data-target="#addGiftModal"><label><i class="mdi mdi-plus"></i></label>添加赠品</button>
                </div>-->
                <table id="giftTable"></table>
                <h3>优惠券</h3>
                <table id="couponTable" style="margin-top: 20px;"></table>
                <h3>附加费用</h3>
                <div class="row">
                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <label class="control-label">金额</label>
                        <div class="form-content">
                            <input type="text" class="form-control" placeholder="该费用不计入业绩和提成" id="surcharge">
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 surcharge-remarks">
                        <label class="control-label label-required">备注</label>
                        <div class="form-content">
                            <textarea class="form-control" rows="3" placeholder="不多于100字" id="orderSurchargeRemark"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="well form-well">
                <h2>合同金额</h2>
                <div class="row amount-total">
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                        <div class="well">
                            <h5>合同总金额</h5>
                            <p id="totalAmount">0.00</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                        <div class="well">
                            <h5>合同优惠总金额</h5>
                            <p id="discountAmount">0.00</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                        <div class="well">
                            <h5>合同实际总金额</h5>
                            <p id="realAmount">0.00</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                        <div class="well">
                            <h5>应收款</h5>
                            <p id="receivables">0.00</p>
                        </div>
                    </div>
                </div>
            </div>
<!--            <form  id="appendContract">-->
<!--                -->
<!--            </form>-->
            <div class="well form-well file-well">
                <div class="row">
                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                        <div class="file-group form-group">
                            <label class="control-label label-required">合同附件</label>

<!--                            <input type="file" accaccept=".png,.jpg,.jpeg,.bmp,.gif,.docx,.doc" class="hidden" id="contractImg" >-->
<!--                            <input type="hidden" id="contractPic" class="image-id" >-->
<!--                            <div class="img-box" id="contractImgBox"></div>-->
<!--                            <button class="btn btn-default file-browser" type="button" >上传合同附件</button>-->
                            <div class="file-box">
                                <input type="hidden" id="contractPic" class="image-id" >
                                <input type="file"  id="contractImg" name="contractImg" class="form-control"  onchange="uploadImg('contractImg')">
<!--                                <input type="file" id="fileToUpload" name="fileToUpload" class="form-control"  onchange="fileSelected('fileToUpload')" />-->

                            </div>
<!--                            <div class="file-box">-->
<!--                                <input type="file" id="file" class="hidden" />-->
<!--                                <label for="file" class="form-control" id="fileLabel">选择补充材料</label>-->
<!--                                <button class="btn btn-primary" type="button" onclick="uploadReplenishAnnex()">提交</button>-->
<!--                            </div>-->
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 approval">
                        <div class="file-group">
                            <h5 class="label-required">合同审核</h5>
<!--                            <input type="file" accaccept=".png,.jpg,.jpeg,.bmp,.gif,.docx,.doc" class="hidden" id="examineImg">-->
<!--                            <input type="hidden" id="examinedPic" class="image-id">-->
<!--                            <div class="img-box" id="examineImgBox"></div>-->
<!--                            <button class="btn btn-default file-browser" type="button">上传审核图片</button>-->
                            <div class="file-box">
                                <input type="hidden" id="examinedPic" class="image-id">
                                <input type="file"  id="examineImgBox" name="examineImgBox" class="form-control"  onchange="uploadImg('examineImgBox')">
<!--                                <input type="file" id="exfileToUpload" name="exfileToUpload" class="form-control"  onchange="fileSelected('exfileToUpload')" />-->

                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 approval">
                        <h5 class="label-required">审核备注</h5>
                        <textarea class="form-control" placeholder="请输入审核意见，不少于10个字" id="contractReviewNotes"></textarea>
                    </div>
                    <div class="col-xs-12">
<!--                        <p>上传图片格式：<code>.png</code>，<code>.jpg</code>，<code>.jpeg</code>，<code>.bmp</code>，<code>.gif</code></p>-->
                    </div>
                </div>
            </div>


<!--            <div class="form-actions">-->
<!--                <button class="btn btn-primary btn-label form-group" type="submit" name="submit"  id="submit"><label><i class="mdi mdi-check"></i></label>提交</button>-->
<!--                <button class="btn btn-default" type="button">重置</button>-->
<!--            </div>-->

        </div>
    </div>
</div>

<!-- 添加产品 弹窗 -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="addProductModal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4>添加产品</h4>
            </div>
            <div class="modal-body">
                <div class="select-switch pull-left" id="productCategories">
                    <label><input type="radio" name="productCategories" value="" checked><span>全部</span></label>
<!--                    <label><input type="radio" name="productCategories" value="1"><span>会员</span></label>-->
<!--                    <label><input type="radio" name="productCategories" value="0"><span>非会员</span></label>-->
                </div>
                <div class="input-group m-b-10 w-30 pull-right">
                    <input type="text" class="form-control" placeholder="请输入产品名称" id="searchProductName">
                    <span class="input-group-btn"><button type="button" class="btn btn-default" id="productSearch">搜索</button></span>
                </div>
                <table id="productListTable"></table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="addRow('productListTable', 'productTable');">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- 添加活动产品 弹窗 -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="addProductActivityModal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4>添加活动产品</h4>
            </div>
            <div class="modal-body">
                <div class="input-group m-b-10 w-30">
                    <input type="text" class="form-control" placeholder="请输入活动产品名称" id="searchActivityName">
                    <span class="input-group-btn"><button type="button" class="btn btn-default" id="activitySearch">搜索</button></span>
                </div>
                <table id="productActivityListTable"></table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="addRow('productActivityListTable', 'productActivityTable');">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- 添加赠品 弹窗 -->
<!--<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="addGiftModal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4>添加赠品</h4>
            </div>
            <div class="modal-body">
                <table id="productGiftListTable"></table>
                &lt;!&ndash;<form class="form-horizontal" autocomplete="off">
                    <div class="form-group">
                        <label class="col-sm-3 control-label label-required">赠品</label>
                        <div class="col-sm-8">
                            <select multiple="multiple" id="giftList" class="form-control">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label label-required">赠品类别</label>
                        <div class="col-sm-5">
                            <select class="form-control" title="请选择" id="giftCategory">
                                <option value="1">产品类</option>
                                <option value="2">价格类</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group" id="productLable">
                        <label class="col-sm-3 control-label label-required">关联产品</label>
                        <div class="col-sm-8">
                            <select id="productList" class="form-control" title="请选择" data-live-search="true"></select>
                        </div>
                    </div>
                    <div class="form-group" id="priceLabel">
                        <label class="col-sm-3 control-label label-required">起止价格</label>
                        <div class="col-sm-8">
                            <div class="form-content input-group" id="giftActivityPrice">
                                <input type="text" class="form-control" id="giftActivityPriceStart" placeholder="起始价格">
                                <span class="input-group-addon">-</span>
                                <input type="text" class="form-control" id="giftActivityPriceEnd" placeholder="截止价格">
                            </div>
                        </div>
                    </div>
                </form>&ndash;&gt;
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="addGift();">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>-->

</body>
<script type="text/javascript" src="/js/jquery-2.2.3.min.js"></script>
<!--<script type="text/javascript" src="/js/jquery.min.js"></script>-->

<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/js/main.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-notify.min.js"></script>
<script src="/js/jquery-confirm/jquery-confirm.min.js"></script>
<script type="text/javascript" src="/js/crm/common/lightyear.js"></script>
<!--公共js-->
<script src="/js/crm/common/common.js"></script>
<!--时间选择插件-->
<script src="/js/bootstrap-datetimepicker/moment.min.js"></script>
<script src="/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="/js/bootstrap-datetimepicker/locale/zh-cn.js"></script>
<!--日期选择插件-->
<script src="/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script type="text/javascript" src="/js/crm/common/dataRangePicker.min.js"></script>
<!-- 图片上传插件 -->
<script type="text/javascript" src="/js/upload.img.js"></script>
<!-- 多选框下拉 -->
<script type="text/javascript" src="/js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="/js/bootstrap-select.js"></script>
<!-- 标签插件 -->
<!--<script type="text/javascript" src="/js/bootstrap-tagsinput/bootstrap3-typeahead.min.js"></script>-->
<script type="text/javascript" src="/js/bootstrap-tagsinput/typeahead.bundle.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
<script src="/js/crm/contractManager/user/addContract.js"></script>


</html>
